<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>6_固定定位广告条</title>
        <style>
            .top{
                height: 120px;
                background-color: #5aa4ae;
                color: #fff;
                font-size: 30px;
                position:fixed;
                top: 0;
            /* 视口 ViewPort  视口宽度vw 视口高度vh 值为整数,为视口的百分比 */
                width: 100vw;/*100%的视口宽度*/
            }
            .left,.right{
                width: 60px;
                height: 200px;
                position: fixed;
                top: 300px;
            }
            .left{
                background-color: #fff799;
                left: 20px;
            }
            .right{
                background-color: #f35336;
                right: 20px;
            }
            .main{
                margin-top: 130px;
            }
        </style>
    </head>
    <body>
        <div class="top">我是顶部的广告条</div>
        <div class="left">我是左侧的广告条</div>
        <div class="right">我是右侧的广告条</div>
        <div class="main">
            我是内容
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dicta dignissimos expedita facere
                fugiat harum laboriosam laborum laudantium, minima minus officia perferendis porro, quae sint sunt ullam
                vel velit voluptate!
            </div>
            <div>Ab aspernatur aut autem, delectus dolorem doloremque et ex fuga, harum id laudantium molestiae natus
                nesciunt nihil officiis perferendis perspiciatis quos reprehenderit repudiandae sequi similique sit
                veniam vitae! Incidunt, repellendus!
            </div>
            <div>Accusamus dicta dolores hic impedit inventore neque numquam obcaecati ratione reprehenderit voluptas?
                Autem, deserunt, dolorum facere fugit incidunt ipsam iusto pariatur porro quas quia rem tenetur
                voluptates. Consequatur, expedita, laboriosam!
            </div>
            <div>A cumque delectus doloremque ea iste odit officia quibusdam temporibus tenetur vero! Aliquam animi
                architecto assumenda beatae dolor ea iusto, maxime nobis, placeat quas quis ullam ut vel, veniam
                voluptatibus.
            </div>
            <div>Accusantium commodi eaque esse, eum praesentium quis quos ratione sed! Aperiam asperiores aspernatur
                corporis doloribus exercitationem iure, labore minus nam, neque obcaecati pariatur quam quod quos
                tenetur ullam, unde ut.
            </div>
            <div>Earum, eius eligendi enim eveniet facilis fuga laborum placeat quibusdam quo velit. Ab accusamus
                accusantium dignissimos eius fuga ipsam itaque iusto, magni maxime, minima obcaecati optio pariatur,
                tenetur unde voluptas!
            </div>
            <div>Adipisci assumenda, at blanditiis commodi consectetur cum dolore, enim eum harum inventore ipsa maiores
                mollitia neque nesciunt nobis nulla odio officia perspiciatis sequi similique sint sunt tenetur ullam
                unde velit?
            </div>
            <div>Aliquam corporis, delectus deleniti ea esse id inventore itaque iure laborum natus nemo odio quibusdam
                quis quisquam recusandae sint voluptate. Asperiores debitis dolor illo iste nihil praesentium soluta
                unde ut.
            </div>
            <div>Harum in iure quasi quo sapiente! Dignissimos ea earum iure laborum nam nemo omnis perferendis
                perspiciatis quasi sequi? Culpa dolore ea explicabo fugit hic maxime nam nostrum pariatur porro, quos?
            </div>
            <div>Accusamus ad aliquid architecto culpa cumque debitis deserunt error esse est excepturi exercitationem
                impedit inventore ipsam, laboriosam libero non, odio officia optio placeat porro quisquam repudiandae
                sequi sit soluta voluptas.
            </div>
            <div>Accusamus ad aperiam aspernatur, assumenda commodi delectus deleniti dicta dolores doloribus eligendi
                exercitationem facilis fugiat harum ipsa iusto nostrum quia ratione recusandae reprehenderit similique
                suscipit vitae voluptatem? Labore, possimus, velit?
            </div>
            <div>A animi aspernatur atque beatae consequuntur corporis distinctio enim ipsam ipsum iste labore
                laboriosam magni maxime nulla numquam omnis porro quam quisquam, quos sapiente sint soluta tenetur totam
                unde, veritatis?
            </div>
            <div>Animi asperiores commodi consectetur corporis culpa deserunt dignissimos et ipsum maiores modi
                necessitatibus nesciunt numquam odit perferendis porro, quaerat quam quisquam quo sunt velit. Adipisci
                cupiditate eveniet illo inventore laboriosam?
            </div>
            <div>Eius nesciunt repudiandae sequi? Accusamus animi aperiam deserunt, distinctio esse fugiat ipsa nisi non
                optio praesentium quae quo soluta veniam? Animi architecto facere inventore maxime, repellendus saepe
                sunt tempore veniam.
            </div>
            <div>Aliquid doloremque excepturi ipsa magnam pariatur provident ratione repellendus tempora vitae
                voluptatibus! Assumenda at consequatur culpa cupiditate delectus enim error eveniet explicabo impedit,
                incidunt molestiae nihil perspiciatis possimus reiciendis sequi.
            </div>
            <div>Accusantium commodi corporis deserunt dolorum ducimus est fugiat harum inventore ipsum itaque, iusto
                labore laboriosam nisi numquam officia porro quasi quibusdam quos reiciendis repudiandae sit, voluptates
                voluptatum? Eligendi, expedita molestias!
            </div>
            <div>Assumenda, dolorem est fugiat nostrum ratione totam. A atque deserunt, dolorem ea ex facere, libero
                molestiae molestias quis recusandae reiciendis soluta tempore ut veniam voluptatem. Blanditiis
                dignissimos esse fugit optio.
            </div>
            <div>Ex fuga harum, iusto rem reprehenderit suscipit. Architecto doloremque eaque esse reiciendis voluptas?
                Accusantium adipisci aspernatur at aut autem beatae consectetur cum cupiditate ducimus earum, ipsa
                necessitatibus optio repudiandae sequi.
            </div>
            <div>Ad alias autem consequuntur corporis cum dolor doloribus dolorum earum eius fuga harum in incidunt
                ipsam iure, maxime minus, mollitia natus provident quae quam, quibusdam quo suscipit veniam voluptas
                voluptatem?
            </div>
            <div>Aliquam at beatae commodi cupiditate delectus deleniti dicta dolore eligendi et excepturi
                exercitationem harum hic in incidunt laboriosam, mollitia nostrum obcaecati quasi quisquam quos
                recusandae, reprehenderit repudiandae sapiente totam veniam!
            </div>
            <div>Magnam sint, soluta? Assumenda consequuntur ea eius fuga fugit in ipsum iusto laboriosam laborum,
                libero, minus modi nihil officia pariatur possimus quae reiciendis repellat reprehenderit similique
                temporibus ut vel voluptas?
            </div>
            <div>Architecto at nam natus nesciunt quis sint voluptate. Amet at, aut commodi cumque debitis facere
                facilis itaque labore minima minus officia officiis quidem recusandae sunt totam ullam ut veritatis?
                Ullam?
            </div>
            <div>Aliquam at ex inventore laudantium nobis omnis praesentium soluta sunt! Distinctio earum illo sunt. Ab
                adipisci atque deserunt dolorem dolores et ex facere in minus mollitia natus neque nisi, numquam.
            </div>
            <div>Accusamus accusantium alias asperiores blanditiis cum dicta distinctio doloremque eos eveniet fuga
                fugiat, iusto laboriosam maiores molestias nam natus nisi omnis, pariatur quaerat quam quasi quo vero
                voluptas? Aliquam, sit?
            </div>
            <div>Accusamus adipisci aperiam asperiores atque corporis cupiditate dicta dignissimos distinctio dolorem
                fugit id illum incidunt magnam maiores minima modi, mollitia, nam natus nemo quisquam quos repellat
                saepe sapiente totam vitae?
            </div>
            <div>Aliquid animi architecto culpa eaque enim exercitationem illo modi quasi quis repellat repudiandae
                vitae voluptatem, voluptates. At autem beatae distinctio explicabo minima quos rem? Doloribus ducimus
                est neque nesciunt qui.
            </div>
            <div>Amet aperiam asperiores, at cupiditate eligendi eos explicabo, fuga illum itaque maxime perferendis
                porro provident quaerat quam quia repellat repudiandae tempore veniam vitae voluptate! Cumque laborum
                mollitia repellat sequi unde!
            </div>
            <div>Aliquam asperiores cupiditate dignissimos eligendi, error fuga illo inventore ipsa iusto nulla,
                perferendis quas reiciendis soluta suscipit ullam. Animi asperiores atque blanditiis distinctio error
                laudantium libero recusandae sit, ut veniam!
            </div>
            <div>Alias amet aperiam assumenda consequuntur debitis dignissimos eius eum ex fugit illo illum ipsum,
                magnam maxime nobis obcaecati odio officiis quis quisquam ratione reiciendis sequi tempora tempore
                voluptatum. Facere, tempora?
            </div>
            <div>Adipisci deserunt distinctio et eum ipsum quaerat quasi quia sint tenetur vel. Consectetur distinctio
                facilis nemo obcaecati placeat quaerat similique suscipit unde vero voluptates! Excepturi fugit libero
                placeat tempore velit.
            </div>
            <div>Ab alias asperiores, atque autem commodi consequuntur deserunt doloremque eos est eveniet excepturi
                iure minus perferendis temporibus ut vero voluptatem voluptatibus. Aliquid ea ex laudantium magnam qui.
                Neque, repellat, voluptatem?
            </div>
            <div>Accusantium aliquam dicta impedit minus molestiae nobis praesentium ratione voluptatum? A alias amet
                autem eos fugiat, in ipsum nam quis reiciendis repellendus reprehenderit saepe sapiente tempore tenetur
                ullam velit vitae!
            </div>
            <div>Aliquam asperiores, blanditiis dolores dolorum eius error excepturi expedita ipsa magnam pariatur
                perspiciatis placeat quas ratione soluta, totam ullam voluptas! Aspernatur eveniet impedit iste laborum
                obcaecati officia pariatur qui ullam.
            </div>
            <div>Dicta laboriosam omnis pariatur perferendis! Assumenda distinctio fugiat iure nostrum suscipit.
                Aperiam, beatae eligendi id nostrum optio praesentium provident sequi soluta. Eos iure nostrum odio rem
                repellat rerum veritatis, voluptates?
            </div>
            <div>Ab animi consequatur dicta esse ex, illum ipsa iusto labore magni officiis pariatur possimus quae
                quisquam rerum sint unde vel! Consequatur consequuntur incidunt inventore nemo nulla placeat quibusdam
                sunt ullam.
            </div>
            <div>A aliquam autem, commodi cumque dolore eaque fuga fugiat, impedit molestiae, nemo nesciunt nulla quidem
                sequi similique tempora tenetur ullam voluptatibus. Culpa cumque deserunt quod ratione repellendus sint,
                sunt voluptatum!
            </div>
            <div>Ab accusamus animi at atque corporis cumque debitis dignissimos eveniet expedita illo illum inventore
                itaque iure laborum, modi optio praesentium quaerat quasi repudiandae rerum sequi soluta, temporibus
                totam velit voluptate.
            </div>
            <div>Ad facilis minima saepe. Consequatur deserunt dolores ut. Ad culpa magnam praesentium quibusdam
                tempore. A ad adipisci aliquam consequatur, dignissimos doloribus ea exercitationem libero, optio quis
                reprehenderit similique tempore veritatis.
            </div>
            <div>Aliquam amet consectetur esse eum ex facilis hic illum ipsa labore laborum maxime minus, natus odit
                optio quas quia, quibusdam, quos repellat saepe sed soluta vero voluptatibus? Eaque modi, repellat?
            </div>
            <div>Aut dolore, earum enim error et fugiat incidunt qui! Accusantium amet, commodi consequuntur enim esse
                expedita explicabo facilis fugit id illum in incidunt magnam magni nulla, quidem quos repudiandae vero?
            </div>
            <div>Animi assumenda aut commodi dolores et illo in iusto mollitia nam nisi porro ratione suscipit, vitae
                voluptas voluptates! Architecto asperiores consectetur dolor ducimus excepturi explicabo natus quia
                veritatis voluptatem voluptatum!
            </div>
            <div>Ab amet corporis eaque nam, necessitatibus omnis perferendis quod similique totam veniam. Alias culpa
                cumque deserunt, eaque earum eligendi excepturi, facere labore minima minus obcaecati odit officiis quia
                reiciendis, soluta.
            </div>
            <div>Asperiores at aut cumque distinctio dolorum eius eligendi eveniet exercitationem fugiat, impedit in
                laborum molestiae molestias nobis optio possimus praesentium quae quidem quo quod similique veniam
                veritatis voluptate voluptates voluptatum.
            </div>
            <div>Aut consequuntur est, et illum inventore ipsam iure officiis perspiciatis possimus praesentium, quod
                recusandae reiciendis repellat, saepe ullam vel vitae! Autem delectus, expedita ipsam iste odit
                provident rerum saepe tempora?
            </div>
            <div>Debitis ducimus fuga incidunt nulla officia optio, perspiciatis quia similique. Accusamus accusantium
                aliquam, amet aperiam culpa cupiditate dolores enim, ex neque non officia provident repellat sapiente
                sit veniam vero, voluptatibus.
            </div>
            <div>Natus, quod, tempore! A architecto aspernatur blanditiis ex impedit in minus obcaecati qui quo saepe!
                Numquam, placeat, rem! Aliquam, commodi debitis expedita id minima nihil quasi sapiente tenetur ut vel.
            </div>
            <div>Amet corporis earum maiores sit? Consequatur, doloremque, eaque! Accusantium, alias, aliquam autem
                deserunt enim labore magnam non numquam odit, optio quisquam quo quos velit? Enim excepturi iste nostrum
                quod ut.
            </div>
            <div>Ab adipisci aperiam aut consequatur culpa cupiditate debitis doloribus facilis harum illum, ipsam iste
                magni maiores officia quam qui quis quisquam sit sunt, suscipit tempora tempore, voluptate. Eius,
                nostrum, velit!
            </div>
            <div>A accusamus beatae commodi culpa cumque debitis deleniti dolores doloribus ex fuga fugiat harum iure
                magnam maxime natus, perspiciatis placeat quas quis quod quos rem rerum temporibus tenetur veniam
                voluptas?
            </div>
            <div>Amet consequatur ducimus est, excepturi molestiae nobis quam quod reprehenderit? Cumque distinctio
                dolore ducimus ea eum impedit labore, sit. Adipisci deserunt excepturi hic inventore iste, maxime
                perspiciatis repellat sapiente voluptate.
            </div>
            <div>Accusamus amet aperiam commodi consequatur distinctio earum est ex fugit hic impedit mollitia natus
                nemo neque nostrum officia possimus, provident quidem quisquam quo sed soluta sunt suscipit tempore
                temporibus veritatis.
            </div>
            <div>Cumque cupiditate dolore ducimus ex ipsum sequi suscipit tempore vitae? Accusantium adipisci
                asperiores, atque consectetur dicta ducimus ea eius est id perspiciatis quas quo sapiente sed soluta
                tempore vel, vitae!
            </div>
            <div>Consequuntur, libero molestias? Aperiam cupiditate ducimus iste iure libero maxime optio pariatur
                perferendis sint voluptate? Amet blanditiis hic iste nulla, quas reiciendis velit. Cumque eveniet qui
                suscipit temporibus ullam voluptate?
            </div>
            <div>Assumenda atque dolorum ipsum molestias nam officia perferendis placeat possimus ratione sunt,
                voluptatem voluptatibus. Beatae eius esse hic incidunt minus, nihil nulla pariatur quidem rem saepe sunt
                suscipit veritatis voluptatum!
            </div>
            <div>Consequatur deserunt dolor facilis harum ipsam, iste molestias optio placeat quia rerum sed sunt
                temporibus voluptas! Ab, accusamus aspernatur eum fuga illum, itaque molestias officiis pariatur quasi
                quidem vitae voluptatum?
            </div>
            <div>Alias commodi modi nam omnis rerum suscipit voluptates. Ab adipisci amet doloribus earum nihil numquam
                quibusdam reiciendis sed sequi temporibus! Consequuntur dolorum, eos laborum nostrum officiis quasi
                ratione temporibus vitae.
            </div>
            <div>Aperiam dolor error inventore ipsam necessitatibus, optio quaerat rem? Adipisci aliquam animi beatae
                eaque est ipsam, ipsum itaque omnis, quas quo sequi voluptas voluptatem? Animi consectetur fugiat libero
                maiores sapiente.
            </div>
            <div>Animi, blanditiis officia! A expedita facilis fuga sed. Adipisci architecto, autem delectus dolores
                earum eligendi eos eum excepturi illum nemo nisi nobis, odio perspiciatis, quam qui quod veritatis
                voluptatem voluptatum!
            </div>
            <div>Aliquam aut blanditiis consequuntur, eum fugit, ipsa iste laudantium magni nesciunt nostrum, numquam
                odio omnis sint voluptates voluptatum! Consectetur, eaque harum nihil non numquam obcaecati optio
                perferendis reiciendis rerum unde!
            </div>
            <div>Corporis dolores doloribus dolorum eos eveniet nisi odio optio quibusdam ratione? Autem et itaque quasi
                quo tempore! Delectus distinctio dolorem expedita fugit impedit mollitia, quia repudiandae rerum sed.
                Cumque, sequi.
            </div>
        </div>
    </body>
</html>